{% load static %}
{% load user_tags %}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>查看会话 - {{ session.user }} - {{ session.username }}@{{ session.host }}</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- Font Awesome -->
  <link href="https://cdn.bootcss.com/font-awesome/5.10.0-11/css/all.min.css" rel="stylesheet">
  
  <!-- Theme style -->
  <link rel="stylesheet" href="{% static 'adminlte/dist/css/adminlte.min.css' %}">
  
  <!-- Toastr -->
  <link rel="stylesheet" href="{% static 'adminlte/plugins/toastr/toastr.min.css' %}">
  
    <!-- 弹出窗口插件 -->
  <link rel="stylesheet" href="{% static 'css/iziModal.min.css' %}">
  
  <!-- webssh -->
  <link rel="stylesheet" href="{% static 'webssh/xterm.css' %}">
  <!--link rel="stylesheet" href="{% static 'webssh/style.css' %}"-->
  
  <!-- custom -->
  <link rel="stylesheet" href="{% static 'css/custom.css' %}">
  
</head>
<body>

<span id="group" hidden>{{ session.group }}</span>

<div class="container-fluid content-list" id="headers" style="background-color: #E3F2FD">
	<div class="row">
		<div class="col-12 mt-2">
			<h5>
			会话名称：{{ session.name }}&nbsp;&nbsp;用户：{{ session.user }}&nbsp;&nbsp;类型：{{ session.get_type_display }}&nbsp;&nbsp;协议：{{ session.get_protocol_display }}&nbsp;&nbsp;主机：{{ session.username }}@{{ session.host }}:{{ session.port }}
			
			{% if request|has_permission:'终端会话关闭' %}
			<a href="javascript:void(0)" class="btn btn-sm btn-danger ml-2" id="session-close"><i class="far fa-times-circle"></i> 断开</a>
			{% endif %}
			
			{% if request|has_permission:'终端会话锁定/解锁' %}
				{% if session.locked %}
					<a href="javascript:void(0)" class="btn btn-sm btn-primary ml-2" id="session-unlock"><i class="fas fa-lock-open"></i> 解锁</a>
				{% else %}
					<a href="javascript:void(0)" class="btn btn-sm btn-info ml-2" id="session-lock"><i class="fas fa-lock"></i> 锁定</a>
				{% endif %}
			{% endif %}
			
			</h5>
		</div>
	</div>
</div>

<div class="mt-1 content-list" id="terminal"></div>

<!-- 断开会话 -->
<div id="modal-close" class="iziModal">
	<div class="container-fluid">
		<div class="row">
			<div class="col-12 p-3">
				<h4 class="text-center mt-3">确定要断开会话吗？</h4>
			</div>
			<div class="col-6 p-3">
				<button type="button" class="btn btn-block btn-secondary" data-iziModal-close>取消</button>
			</div>
			<div class="col-6 p-3">
				<a href="javascript:void(0)"><button type="button" class="btn btn-block btn-success" onclick="close_session();" data-iziModal-close>确定</button></a>
			</div>
		</div>
	</div>
</div>

<!-- 锁定会话 -->
<div id="modal-lock" class="iziModal">
	<div class="container-fluid">
		<div class="row">
			<div class="col-12 p-3">
				<h4 class="text-center mt-3">确定要锁定会话吗？</h4>
			</div>
			<div class="col-6 p-3">
				<button type="button" class="btn btn-block btn-secondary" data-iziModal-close>取消</button>
			</div>
			<div class="col-6 p-3">
				<a href="javascript:void(0)"><button type="button" class="btn btn-block btn-success" onclick="lock_session();" data-iziModal-close>确定</button></a>
			</div>
		</div>
	</div>
</div>

<!-- 解锁会话 -->
<div id="modal-unlock" class="iziModal">
	<div class="container-fluid">
		<div class="row">
			<div class="col-12 p-3">
				<h4 class="text-center mt-3">确定要解锁会话吗？</h4>
			</div>
			<div class="col-6 p-3">
				<button type="button" class="btn btn-block btn-secondary" data-iziModal-close>取消</button>
			</div>
			<div class="col-6 p-3">
				<a href="javascript:void(0)"><button type="button" class="btn btn-block btn-success" onclick="unlock_session();" data-iziModal-close>确定</button></a>
			</div>
		</div>
	</div>
</div>

<!-- jQuery -->
<script src="{% static 'adminlte/plugins/jquery/jquery.min.js' %}"></script>
<!-- Bootstrap 4 -->
<script src="{% static 'adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>

<!-- FastClick -->
<script src="{% static 'adminlte/plugins/fastclick/fastclick.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'adminlte/dist/js/adminlte.min.js' %}"></script>

<!-- Toastr -->
<script src="{% static 'adminlte/plugins/toastr/toastr.min.js' %}"></script>

<!-- 弹出框插件 -->
<script src="{% static 'js/iziModal.min.js' %}"></script>

<!-- webssh -->
<script src="{% static 'webssh/xterm.js' %}"></script>
<script src="{% static 'webssh/webssh.view.js' %}"></script>

<script>
	websocket();
	
	// 关闭会话 -- start
	$("#modal-close").iziModal({
		iconClass: 'icon-announcement',
		width: 450,
	});
	$(document).on('click', '#session-close', function (event) {
		event.preventDefault();
		$('#modal-close').iziModal('open');
	});
	
	close_session = function () {
		toastr.options.closeButton = true;
		toastr.options.showMethod = 'slideDown';
		toastr.options.hideMethod = 'fadeOut';
		toastr.options.closeMethod = 'fadeOut';
		toastr.options.timeOut = 4000;
		toastr.options.extendedTimeOut = 0;
		csrfmiddlewaretoken = '{{ request.COOKIES.csrftoken }}';
		$.ajax({
			url: "{% url 'webssh_api:session_close' %}",
			async: true,
			type: 'POST',
			dataType: 'json',
			data: {
				'csrfmiddlewaretoken': csrfmiddlewaretoken,
				'id': {{ session.id }},
				'group': '{{ session.group }}',
			},
			timeout: 10000,
			cache: true,
			beforeSend: LoadFunction, //加载执行方法
			error: errFunction,  //错误执行方法
			success: succFunction, //成功执行方法
		});
		
		function LoadFunction() {
			
		};
		
		function errFunction() {
			toastr.error('关闭会话错误 "{{ session.name }}"');
		};
		
		function succFunction(res) {
			if (res.code != 200) {
				// 消息框
				toastr.error('关闭会话错误 "{{ session.name }}": ' + res.err);
			} else {
				// 消息框
				toastr.success('成功关闭会话 "{{ session.name }}"');
				$("#session-close").attr("hidden", true);
				$("#session-unlock").attr("hidden", true);
				$("#session-lock").attr("hidden", true);
				$("body").removeAttr("onbeforeunload"); //删除刷新关闭提示属性
			};
		};
	};
	// 关闭会话 -- end

	// 锁定会话 -- start
	$("#modal-lock").iziModal({
		iconClass: 'icon-announcement',
		width: 450,
	});
	$(document).on('click', '#session-lock', function (event) {
		event.preventDefault();
		$('#modal-lock').iziModal('open');
	});
	
	lock_session = function () {
		toastr.options.closeButton = true;
		toastr.options.showMethod = 'slideDown';
		toastr.options.hideMethod = 'fadeOut';
		toastr.options.closeMethod = 'fadeOut';
		toastr.options.timeOut = 4000;
		toastr.options.extendedTimeOut = 0;
		csrfmiddlewaretoken = '{{ request.COOKIES.csrftoken }}';
		var type = '{{ session.get_type_display }}';
		if (type == 'clissh') {
			action_url = "{% url 'webssh_api:session_clissh_lock' %}";
		} else if (type == 'webssh' || type == 'webtelnet' || type == 'webrdp' || type == 'webvnc' ) {
			action_url = "{% url 'webssh_api:session_lock' %}";
		};
		$.ajax({
			url: action_url,
			async: true,
			type: 'POST',
			dataType: 'json',
			data: {
				'csrfmiddlewaretoken': csrfmiddlewaretoken,
				'id': {{ session.id }},
			},
			timeout: 10000,
			cache: true,
			beforeSend: LoadFunction, //加载执行方法
			error: errFunction,  //错误执行方法
			success: succFunction, //成功执行方法
		});
		
		function LoadFunction() {
			
		};
		
		function errFunction() {
			toastr.error('锁定会话错误 "{{ session.name }}"');
		};
		
		function succFunction(res) {
			if (res.code != 200) {
				// 消息框
				toastr.error('锁定会话错误 "{{ session.name }}": ' + res.err);
			} else {
				// 消息框
				toastr.success('成功锁定会话 "{{ session.name }}"');
				$("#session-lock").removeClass("btn-info").addClass("btn-primary");
				$("#session-lock").html('<i class="fas fa-lock-open"></i> 解锁');
				$("#session-lock").attr('id', 'session-unlock');
			};
		};
	};
	// 锁定会话 -- end

	// 解锁会话 -- start
	$("#modal-unlock").iziModal({
		iconClass: 'icon-announcement',
		width: 450,
	});
	$(document).on('click', '#session-unlock', function (event) {
		event.preventDefault();
		$('#modal-unlock').iziModal('open');
	});
	
	unlock_session = function () {
		toastr.options.closeButton = true;
		toastr.options.showMethod = 'slideDown';
		toastr.options.hideMethod = 'fadeOut';
		toastr.options.closeMethod = 'fadeOut';
		toastr.options.timeOut = 4000;
		toastr.options.extendedTimeOut = 0;
		csrfmiddlewaretoken = '{{ request.COOKIES.csrftoken }}';
		var type = '{{ session.get_type_display }}';
		if (type == 'clissh') {
			action_url = "{% url 'webssh_api:session_clissh_unlock' %}";
		} else if (type == 'webssh' || type == 'webtelnet' || type == 'webrdp' || type == 'webvnc' ) {
			action_url = "{% url 'webssh_api:session_unlock' %}";
		};
		$.ajax({
			url: action_url,
			async: true,
			type: 'POST',
			dataType: 'json',
			data: {
				'csrfmiddlewaretoken': csrfmiddlewaretoken,
				'id': {{ session.id }},
			},
			timeout: 10000,
			cache: true,
			beforeSend: LoadFunction, //加载执行方法
			error: errFunction,  //错误执行方法
			success: succFunction, //成功执行方法
		});
		
		function LoadFunction() {
			
		};
		
		function errFunction() {
			toastr.error('解锁会话错误 "{{ session.name }}"');
		};
		
		function succFunction(res) {
			if (res.code != 200) {
				// 消息框
				toastr.error('解锁会话错误 "{{ session.name }}": ' + res.err);
			} else {
				// 消息框
				toastr.success('成功解锁会话 "{{ session.name }}"');
				$("#session-unlock").removeClass("btn-primary").addClass("btn-info");
				$("#session-unlock").html('<i class="fas fa-lock"></i> 锁定');
				$("#session-unlock").attr('id', 'session-lock');
			};
		};
	};
	// 解锁会话 -- end

</script>

<!-- 动画特效 -->
<script src="//cdn.bootcss.com/velocity/1.5.2/velocity.min.js"></script>
<script src="//cdn.bootcss.com/velocity/1.5.2/velocity.ui.min.js"></script>
<script>
	$(".content-list").velocity("transition.slideUpBigIn", { stagger: 150, drag: true });
	//$(".content-list").velocity("transition.slideRightBigIn", { stagger: 120, drag: true });	
</script>

<!-- 页面加载完后再显示，更好的显示特效 -->
<script>
	document.addEventListener("DOMContentLoaded", function(){
		$(".content-list").css("display", "block");
	});
</script>

</body>
</html>
